import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const CityStationRightPanelMeta: IPublicTypeComponentMetadata = {
  componentName: 'CityStationRightPanel',
  title: '城站专题右侧',
  category: '信息展示',
  group: '城站专题',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'CityStationRightPanel',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'ref',
      propType: 'object',
    },
    {
      name: 'key',
      propType: 'string',
    },
    {
      name: 'style',
      propType: 'object',
    },
    {
      name: 'className',
      propType: 'string',
    },
    {
      name: 'width',
      propType: 'oneOfType',
      description: '组件宽度'
    },
    {
      name: 'height',
      propType: 'oneOfType',
      description: '组件高度'
    },
    {
      name: 'noResponsiveScale',
      propType: 'bool',
      description: '是否禁用响应式缩放'
    },
   
    {
      name: 'trafficFlowPrediction',
      propType: 'object',
      description: '流量预测配置'
    },
    {
      name: 'sceneMonitor',
      propType: 'object',
      description: '场景监控配置'
    }
  ],
  configure: {
    props: [
      // ========== 基础属性 ==========
      {
        name: 'basic',
        type: 'group',
        display: 'accordion',
        title: {
          label: '基础属性',
        },
        items: [
          {
            name: 'width',
            title: {
              label: '宽度',
              tip: '组件宽度'
            },
            setter: 'NumberSetter',
            defaultValue: 500,
          },
          {
            name: 'height',
            title: {
              label: '高度',
              tip: '组件高度'
            },
            setter: 'NumberSetter',
            defaultValue: 1000,
          },
          {
            name: 'noResponsiveScale',
            title: {
              label: '禁用响应式缩放',
              tip: '当父容器有缩放时，禁用子组件的响应式缩放'
            },
            setter: 'BoolSetter',
            defaultValue: true,
          }
          
        ]
      },

      // ========== 流量预测模块配置 ==========
      {
        name: 'trafficFlowPredictionConfig',
        type: 'group',
        display: 'accordion',
        title: {
          label: '流量预测模块',
        },
        items: [
          {
            name: 'trafficFlowPrediction.noResponsiveScale',
            title: {
              label: '禁用响应式缩放',
              tip: '当父容器有缩放时，禁用子组件的响应式缩放'
            },
            setter: 'BoolSetter',
            defaultValue: true,
          },

          // 流量预测 - 状态栏配置
          {
            name: 'trafficFlowPrediction.statusBar.title',
            title: {
              label: '预测-中文标题',
              tip: '流量预测状态栏中文标题'
            },
            setter: 'StringSetter',
            defaultValue: '流量预测',
          },
          {
            name: 'trafficFlowPrediction.statusBar.subtitle',
            title: {
              label: '预测-英文标题',
              tip: '流量预测状态栏英文标题'
            },
            setter: 'StringSetter',
            defaultValue: 'TRAFFIC PREDICTION',
          },
          
          // 流量预测 - 数据统计配置
          {
            name: 'trafficFlowPrediction.dataStats.mainValue.text',
            title: {
              label: '预测-主要数值',
              tip: '显示的主要数值'
            },
            setter: 'StringSetter',
            defaultValue: '35.19',
          },
          {
            name: 'trafficFlowPrediction.dataStats.unitConfig.text',
            title: {
              label: '预测-数值单位',
              tip: '主要数值的单位'
            },
            setter: 'StringSetter',
            defaultValue: '万',
          },
          {
            name: 'trafficFlowPrediction.dataStats.title.text',
            title: {
              label: '预测-数据标题',
              tip: '数据统计的标题'
            },
            setter: 'StringSetter',
            defaultValue: '铁路到发今日预测客流',
          },
          {
            name: 'trafficFlowPrediction.dataStats.bottomPanel.leftText.text',
            title: {
              label: '预测-左侧文本',
              tip: '底部面板左侧文本'
            },
            setter: 'StringSetter',
            defaultValue: '今日预测客流处于历史',
          },
          {
            name: 'trafficFlowPrediction.dataStats.bottomPanel.rightText.text',
            title: {
              label: '预测-右侧文本前缀',
              tip: '底部面板右侧文本前缀'
            },
            setter: 'StringSetter',
            defaultValue: '第',
          },
          {
            name: 'trafficFlowPrediction.dataStats.bottomPanel.rightText.rankNumber',
            title: {
              label: '预测-排名数字',
              tip: '排名数字'
            },
            setter: 'StringSetter',
            defaultValue: '1148',
          },
          {
            name: 'trafficFlowPrediction.dataStats.backgroundImage',
            title: {
              label: '预测-背景图片',
              tip: '数据统计区域的背景图片'
            },
            setter: 'StringSetter',
            defaultValue: '/static/images/shouye/sjzb.png',
          },
          {
            name: 'trafficFlowPrediction.dataStats.bottomPanel.backgroundImage',
            title: {
              label: '预测-底部背景图片',
              tip: '底部面板的背景图片'
            },
            setter: 'StringSetter',
            defaultValue: '/static/images/shouye/bj51.png',
          },

          // 流量预测 - 图表配置
          {
            name: 'trafficFlowPrediction.dayChartTitle.title',
            title: {
              label: '预测-图表标题',
              tip: '交通日线图标题'
            },
            setter: 'StringSetter',
            defaultValue: '交通日线图',
          },
          {
            name: 'trafficFlowPrediction.lineChart.data',
            title: {
              label: '预测-图表数据',
              tip: '折线图的数据'
            },
            setter: 'JsonSetter',
            defaultValue: [],
          },
          {
            name: 'trafficFlowPrediction.lineChart.config',
            title: {
              label: '预测-图表配置',
              tip: '折线图的配置项'
            },
            setter: 'JsonSetter',
            defaultValue: {
              smooth: true,
              point: { size: 3, shape: 'circle' },
              color: ['#1890ff', '#52c41a', '#faad14']
            },
          },
          {
            name: 'trafficFlowPrediction.lineChart.width',
            title: {
              label: '预测-图表宽度',
              tip: '折线图的宽度'
            },
            setter: 'NumberSetter',
            defaultValue: 500,
          },
          {
            name: 'trafficFlowPrediction.lineChart.height',
            title: {
              label: '预测-图表高度',
              tip: '折线图的高度'
            },
            setter: 'NumberSetter',
            defaultValue: 180,
          }
        ]
      },

      // ========== 流量预测样式配置 ==========
      {
        name: 'trafficFlowPredictionStyleConfig',
        type: 'group',
        display: 'accordion',
        title: {
          label: '流量预测样式',
        },
        items: [
          {
            name: 'trafficFlowPrediction.dataStats.mainValue.fontSize',
            title: {
              label: '预测-主值字体大小',
              tip: '主要数值的字体大小'
            },
            setter: 'NumberSetter',
            defaultValue: 28,
          },
          {
            name: 'trafficFlowPrediction.dataStats.mainValue.color',
            title: {
              label: '预测-主值颜色',
              tip: '主要数值的颜色'
            },
            setter: 'ColorSetter',
            defaultValue: '#1AD7FF',
            
          },
          {
            name: 'trafficFlowPrediction.dataStats.mainValue.fontFamily',
            title: {
              label: '预测-主值字体',
              tip: '主要数值的字体'
            },
            setter: 'StringSetter',
            defaultValue: 'DINAlternate',
          },
          {
            name: 'trafficFlowPrediction.dataStats.unitConfig.color',
            title: {
              label: '预测-单位字体颜色',
              tip: '数值单位的字体颜色'
            },
            setter: 'ColorSetter',
            defaultValue: '#FFFFFF',
          },
          {
            name: 'trafficFlowPrediction.dataStats.title.fontSize',
            title: {
              label: '预测-标题字体大小',
              tip: '标题的字体大小'
            },
            setter: 'NumberSetter',
            defaultValue: 16,
          },
          {
            name: 'trafficFlowPrediction.dataStats.title.color',
            title: {
              label: '预测-标题颜色',
              tip: '标题的颜色'
            },
            setter: 'ColorSetter',
            defaultValue: '#FFFFFF',
          },
          {
            name: 'trafficFlowPrediction.dataStats.bottomPanel.leftText.color',
            title: {
              label: '预测-底部左侧文本颜色',
              tip: '底部左侧文本颜色'
            },
            setter: 'ColorSetter',
            defaultValue: '#FFFFFF',
          },
          {
            name: 'trafficFlowPrediction.dataStats.bottomPanel.rightText.color',
            title: {
              label: '预测-底部右侧文本颜色',
              tip: '底部右侧文本颜色'
            },
            setter: 'ColorSetter',
            defaultValue: '#FFFFFF',
          }
        ]
      },

      // ========== 场景监控模块配置 ==========
      {
        name: 'sceneMonitorConfig',
        type: 'group',
        display: 'accordion',
        title: {
          label: '场景监控模块',
        },
        items: [
          // 场景监控 - 基础配置
          {
            name: 'sceneMonitor.cameras',
            title: {
              label: '监控摄像头',
              tip: '监控摄像头配置列表'
            },
            setter: 'JsonSetter',
            defaultValue: [
              { id: '1', name: '监控1', isActive: true, hasSignal: true },
              { id: '2', name: '监控2', isActive: false, hasSignal: true },
              { id: '3', name: '监控3', isActive: false, hasSignal: false },
              { id: '4', name: '监控4', isActive: false, hasSignal: true }
            ],
          },
          {
            name: 'sceneMonitor.mainBackgroundImage',
            title: {
              label: '主背景图片',
              tip: '主监控区域的背景图片'
            },
            setter: 'StringSetter',
            defaultValue: 'http://localhost:8085/static/images/changjingjiankong/bz44.png',
          },
          {
            name: 'sceneMonitor.theme',
            title: {
              label: '主题',
              tip: '组件主题'
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { label: '深色', value: 'dark' },
                  { label: '浅色', value: 'light' }
                ]
              }
            },
            defaultValue: 'dark',
          },

          // 场景监控 - 按钮样式配置
          {
            name: 'sceneMonitor.cameraButtonBackground',
            title: {
              label: '按钮背景色',
              tip: '摄像头按钮的背景颜色'
            },
            setter: 'ColorSetter',
            defaultValue: 'rgba(36,48,62,0.57)',
          },
          {
            name: 'sceneMonitor.cameraButtonBorder',
            title: {
              label: '按钮边框色',
              tip: '摄像头按钮的边框颜色'
            },
            setter: 'ColorSetter',
            defaultValue: '#266FA6',
          },
          {
            name: 'sceneMonitor.cameraTextColor',
            title: {
              label: '按钮文字颜色',
              tip: '摄像头按钮的文字颜色'
            },
            setter: 'ColorSetter',
            defaultValue: 'rgba(255,255,255,0.9)',
          },
          {
            name: 'sceneMonitor.buttonSpacing',
            title: {
              label: '按钮间距',
              tip: '摄像头按钮之间的间距'
            },
            setter: 'NumberSetter',
            defaultValue: 12,
          },

          // 场景监控 - 信号指示器配置
          {
            name: 'sceneMonitor.showSignalIndicator',
            title: {
              label: '显示信号指示器',
              tip: '是否显示信号强度指示器'
            },
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            name: 'sceneMonitor.signalIndicatorColor',
            title: {
              label: '信号指示器颜色',
              tip: '信号指示器的颜色'
            },
            setter: 'ColorSetter',
            defaultValue: '#FFFFFF',
          },
          {
            name: 'sceneMonitor.signalGlowColor',
            title: {
              label: '信号指示器发光色',
              tip: '信号指示器的发光颜色'
            },
            setter: 'ColorSetter',
            defaultValue: '#0085FF',
          }
        ]
      }
    ],
    supports: {
      style: true,
      className: true,
      events: ['onClick']
    },
    component: {
      isContainer: false,
      isModal: false,
    },
  },
  icon: 'https://img.alicdn.com/imgextra/i4/O1CN01XCiY1B1UyR3MKMFvk_!!6000000002580-55-tps-200-200.svg',
  keywords: ['城站专题', '右侧面板', 'city station', 'right', 'panel', 'traffic', 'prediction', 'scene monitor', '流量预测', '场景监控'],
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '城站专题右侧',
    screenshot: '',
    schema: {
      componentName: 'CityStationRightPanel',
      props: {
        width: 500,
        height: 1060,
        noResponsiveScale: true,
        trafficFlowPrediction: {
          statusBar: {
            title: '流量预测',
            subtitle: 'TRAFFIC PREDICTION'
          },
          dataStats: {
            mainValue: { 
              text: '35.19',
              fontSize: 28, 
              color: '#1AD7FF',            
              fontFamily: 'DINAlternate'
            },
            unitConfig: { text: '万', },
            title: { 
              text: '铁路到发今日预测客流',
              fontSize: 16,
              color: '#FFFFFF'
            },
            bottomPanel: {
              leftText: { 
                text: '今日预测客流处于历史',
                color: '#FFFFFF'
              },
              rightText: { 
                text: '第', 
                rankNumber: '1148',
                color: '#FFFFFF'
              },
              backgroundImage: '/static/images/shouye/bj51.png'
            },
            backgroundImage: '/static/images/shouye/sjzb.png'
          },
          dayChartTitle: {
            title: '交通日线图'
          },
          lineChart: {
            data: [],
            config: {
              smooth: true,
              point: { size: 3, shape: 'circle' },
              color: ['#1890ff', '#52c41a', '#faad14']
            },
            width: 500,
            height: 318
          }
        },
        sceneMonitor: {
          cameras: [
            { id: '1', name: '监控1', isActive: true, hasSignal: true },
            { id: '2', name: '监控2', isActive: false, hasSignal: true },
            { id: '3', name: '监控3', isActive: false, hasSignal: false },
            { id: '4', name: '监控4', isActive: false, hasSignal: true }
          ],
          mainBackgroundImage: 'http://localhost:8085/static/images/changjingjiankong/bz44.png',
          cameraButtonBackground: 'rgba(36,48,62,0.57)',
          cameraButtonBorder: '#266FA6',
          cameraTextColor: 'rgba(255,255,255,0.9)',
          signalIndicatorColor: '#FFFFFF',
          signalGlowColor: '#0085FF',
          showSignalIndicator: true,
          buttonSpacing: 12,
          theme: 'dark'
        }
      }
    }
  }
];

export default {
  ...CityStationRightPanelMeta,
  snippets
};
